<template>
  <el-space
    size="large"
    direction="vertical"
    style="width: 100%"
    alignment="flex-start"
    fill
  >
    <!-- 项目简介 -->
    <div class="project-title">
      <div class="item">
        <span class="label">项目验收类型：</span>
        <span>结题/现场验收/外协验收</span>
      </div>
      <div class="item">
        <span class="label">完结时间：</span>
        <span>2023/10/02 10:00</span>
      </div>
    </div>
    <!-- 项目简介 -->
    <!-- 项目信息 -->
    <div class="box">
      <el-space
        size="large"
        direction="vertical"
        style="width: 100%"
        alignment="flex-start"
        fill
      >
        <div class="common-title">
          <img src="@/assets/project_images/icon1.png" alt="" class="icon" />
          <span>项目信息</span>
        </div>
        <vxe-table
          align="left"
          :data="tableData"
          size="small"
          border
          min-height="0"
        >
          <vxe-column field="code" title="项目编号" width="150" />
          <vxe-column field="name" title="项目名称" />
        </vxe-table>
      </el-space>
    </div>
    <!-- 项目信息 -->
    <!-- 课题信息 -->
    <div class="box">
      <el-space
        size="large"
        direction="vertical"
        style="width: 100%"
        alignment="flex-start"
        fill
      >
        <div class="common-title">
          <img src="@/assets/project_images/icon2.png" alt="" class="icon" />
          <span>课题信息</span>
        </div>
        <vxe-table
          align="left"
          :data="tableData1"
          size="small"
          border
          min-height="0"
        >
          <vxe-column field="code" title="课题编号" />
          <vxe-column field="name" title="课程名称" />
          <vxe-column field="people" title="课题负责人" />
          <vxe-column field="type" title="课题类型" />
          <vxe-column field="area" title="专业领域" />
          <vxe-column field="start" title="研究开始时间" />
          <vxe-column field="end" title="研究结束时间" />
          <vxe-column field="price" title="预计投入经费（万元）" />
          <vxe-column field="is" title="是否需要外协" />
          <vxe-column field="unit" title="承担单位" />
          <vxe-column field="unit1" title="协作单位" />
          <vxe-column field="people1" title="课题负责人" />
        </vxe-table>
      </el-space>
    </div>
    <!-- 课题信息 -->
    <!-- 项目管理信息 -->
    <div class="box">
      <el-space
        size="large"
        direction="vertical"
        style="width: 100%"
        alignment="flex-start"
        fill
      >
        <div class="common-title">
          <img src="@/assets/project_images/icon3.png" alt="" class="icon" />
          <span>项目管理信息</span>
        </div>
        <!-- 立项信息 -->
        <div class="sub-title">立项信息</div>
        <vxe-table
          align="left"
          :data="tableData2"
          size="small"
          border
          min-height="0"
        >
          <vxe-column field="code" title="立项建议ID" />
          <vxe-column field="status" title="审核状态" />
          <vxe-column field="unit" title="上报单位" width="30%" />
          <vxe-column field="people" title="上报人" />
          <vxe-column field="time" title="记录创建时间" />
          <!-- <vxe-column title="操作" width="80">
            <template #default="{ row }">
              <el-link type="primary">详情</el-link>
            </template>
          </vxe-column> -->
        </vxe-table>
        <!-- 立项信息 -->
        <!-- 开题设计报告 -->
        <div class="sub-title">开题设计报告</div>
        <vxe-table
          align="left"
          :data="tableData2"
          size="small"
          border
          min-height="0"
        >
          <vxe-column field="code" title="开题设计报告ID" />
          <vxe-column field="status" title="审核状态" />
          <vxe-column field="unit" title="上报单位" width="30%" />
          <vxe-column field="people" title="上报人" />
          <vxe-column field="time" title="记录创建时间" />
          <!-- <vxe-column title="操作" width="80">
            <template #default="{ row }">
              <el-link type="primary">详情</el-link>
            </template>
          </vxe-column> -->
        </vxe-table>
        <!-- 开题设计报告 -->
      </el-space>
    </div>
    <!-- 项目管理信息 -->
  </el-space>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    setup() {
      const tableData = ref([
        {
          code: '2021ZD02F-0',
          name: '大尺寸BH-VDT垂直钻井工具在万米科探井的支撑应用',
        },
      ])

      const tableData1 = ref([
        {
          code: 'XXXXXXXXX',
          name: 'XXXXXXXXXX',
          people: 'XXXXXXXXXX',
          type: 'XXXXXXXXXX',
          area: '一级-二级',
          start: '2023/10/02',
          end: '2023/10/02',
          price: 'XXXXXXXXXX',
          is: '是',
          unit: 'XXXX',
          unit1: 'XXXXXX',
          people1: '张三',
        },
      ])

      const tableData2 = ref([
        {
          code: 'XXXXXX',
          status: 'XXXXXX',
          unit: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
          people: 'XXXXXX',
          time: '2023/10/02 10:00',
        },
      ])

      return { tableData, tableData1, tableData2 }
    },
  })
</script>

<style scoped lang="scss">
  .project-title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    padding: 10px;
    background: var(--vxe-table-header-background-color);

    .item {
      display: inline-flex;
      margin-right: 90px;
      font-size: $base-font-size-default;

      .label {
        color: $base-color-text-secondary;
      }
    }
  }

  .box {
    .common-title {
      display: flex;
      align-items: center;
      font-size: $base-font-size-default;
      font-weight: bold;
      color: $base-color-text-primary;

      .icon {
        margin-right: 10px;
      }
    }

    .sub-title {
      font-size: $base-font-size-small;
      font-weight: bold;
    }
  }
</style>
